<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<style>
    #searchOptionTb{display: none;}
</style>
<form id="customerform" method="post" style="padding-top:1px">
    <input type="hidden" name="id">
    <input type="hidden" name="projectid"  >
    <input type="hidden" name="projectname"  >
    <input type="hidden" name="projectcode"  >
    <input type="hidden" name="projectuser"  >
    <input type="hidden" name="voltmark"  >
    <input type="hidden" name="volume"  >
    <input type="hidden" name="usertype"  >
    <input type="hidden" id="routerid" name="routerid"  >
    <input type="hidden" id="boardid" name="boardid"  >
    <input type="hidden" name="boardlng"  >
    <input type="hidden" name="boardlat"  >
    <table style="margin:6px; width: 98%">
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">配电房名称：</td>
            <td>
                <input type="text" name="boardname" autocomplete="off" class="selectp" data-options="required:true" style="width:160px;height: 24px;">
            </td>
        </tr>
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">单位名称：</td>
            <td>
                <input type="text" name="factoryname" autocomplete="off" class="selectp" data-options="required:true" style="width:160px;height: 24px;">
            </td>

        </tr>
        <tr style="height: 30px">
            <td class="label"  width="126px" style="text-align: right">单位联系人：</td>
            <td>
                <input type="text" name="factoryuser" autocomplete="off" class="selectp" data-options="required:true" style="width:160px;height: 24px;">
            </td>
        </tr>
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">单位联系方式：</td>
            <td>
                <input type="text" name="factoryphone" autocomplete="off" class="selectp" data-options="required:true" style="width:160px;height: 24px;">
            </td>
        </tr>
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">巡视单位：</td>
            <td>
                <input type="text" id="routername" name="routername"  class="selectp" data-options="required:true" style="width:160px;height: 24px;">
            </td>
        </tr>
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">巡视人员：</td>
            <td>
                <select id="cunsumerid" name="cunsumerid" style="width: 188px;height: 26px;" class="selectp">
                </select>
            </td>
        </tr>
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">运维类型：</td>
            <td>
                <select name="tasktype" id="tasktype" style="width: 188px;height: 26px;" class="selectp">
                </select>
            </td>
        </tr>
        <tr style="height: 30px">
            <td class="label"  width="126px" style="text-align: right">报修联系人：</td>
            <td>
                <input type="text" name="jbname" autocomplete="off" class="selectp" data-options="required:true" style="width:160px;height: 24px;">
            </td>
        </tr>
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">报修联系方式：</td>
            <td>
                <input type="text" name="jbphone" autocomplete="off" class="selectp" data-options="required:true" style="width:160px;height: 24px;">
            </td>
        </tr>
        <tr style="height: 30px">
            <td class="label"  width="126px" style="text-align: right">报修内容：</td>
            <td>
                <input type="text" name="jbcontext" autocomplete="off" class="selectp" data-options="required:true" style="width:160px;height: 24px;">
            </td>
        </tr>
    </table>
</form>
<script type="text/javascript" charset="utf-8" th:inline="none">
    $(document).ready(function() {
        document.getElementById("routerid").onchange = function () {
            $("#cunsumerid").empty();
            //根据一级select的值，异步获取数据更新二级的选项
            $.ajax({
                type:'get',
                url:'/cunsumer/routerCunsumerLeader',
                data:{
                    routerid:$("#routerid").val()
                },
                cache:false,
                dataType:'json',
                success:function(response){
                    if(response.code == '200'){
                        secondDatas = response.result;
                        //遍历回传的数据添加到二级select
                        $.each(secondDatas, function(key, secondData) {
                            var option = '<option value="'+secondData.id+'">'+secondData.name+'</option>';
                            $("#cunsumerid").append(option);
                        });
                        //二级select展示
                        $("#bcunsumerid").fadeIn("slow");
                    }
                },
                error:function(){
                    alert("请求失败")
                }
            });
        };

    })
</script>
</html>